 <template>
  <!-- 设备管理 -- 添加/编辑/详情  风机信息 -->
  <view class="addwmInfo">
    <view class="wrapper">
      <view class="wrapper-item content">
        <block v-if="orFlag == 1 || orFlag == 2">
          <u-form
            :model="form"
            ref="form"
            label-width="130"
            :error-type="errorType"
          >
            <view class="inputPad">
              <u-form-item
                label="风机类型"
                borderBottom
                :required="true"
                @click="cellClick('text', 'fanTypeDesc')"
              >
                <u--input
                  v-model="form.fanTypeDesc"
                  disabled
                  disabledColor="#ffffff"
                  placeholder="请选择"
                  placeholderClass="placeholderClass"
                  inputAlign="right"
                  border="none"
                ></u--input>
                <u-icon slot="right" name="arrow-right"></u-icon>
              </u-form-item>
            </view>

            <u-form-item label="排风速(m/s)" borderBottom :required="true">
              <u--input
                v-model.trim="form.fanSpend"
                border="none"
                placeholder="请填写"
                placeholderClass="placeholderClass"
                inputAlign="right"
                :maxlength="8"
              ></u--input>
            </u-form-item>

            <u-form-item label="实际排风量(m³/h)" borderBottom :required="true">
              <u--input
                v-model.trim="form.fanRealSpend"
                border="none"
                placeholder="请填写"
                placeholderClass="placeholderClass"
                inputAlign="right"
                :maxlength="8"
              ></u--input>
            </u-form-item>
          </u-form>
        </block>
        <block v-if="orFlag == 3">
          <u-form
            :model="form"
            ref="form"
            label-width="130"
            :error-type="errorType"
          >
            <u-form-item label="风机类型" borderBottom>
              <u--input
                v-model="form.fanTypeDesc"
                readonly
                disabledColor="#ffffff"
                inputAlign="right"
                border="none"
              ></u--input>
            </u-form-item>
            <u-form-item label="排风速(m/s)" borderBottom>
              <u--input
                v-model="form.fanSpend"
                readonly
                disabledColor="#ffffff"
                inputAlign="right"
                border="none"
              ></u--input>
            </u-form-item>
            <u-form-item label="实际排风量(m³/h)" borderBottom>
              <u--input
                v-model="form.fanRealSpend"
                readonly
                disabledColor="#ffffff"
                inputAlign="right"
                border="none"
              ></u--input>
            </u-form-item>
          </u-form>
        </block>
      </view>
    </view>

    <view class="btns thispageBtn">
      <block v-if="orFlag == 1 || orFlag == 2">
        <button
          class="cancel-btn lt"
          type="primary"
          @click="navBack('back', 1, 1)"
        >
          取消
        </button>
        <button class="submit-btn" type="primary" @click="submitHandle">
          保存
        </button>
      </block>
      <button
        v-if="orFlag == 3"
        class="submit-btn"
        type="primary"
        @click="editHandle"
        icon="map"
        style="width: 100%"
      >
        编辑
      </button>
    </view>

    <u-picker
      :show="pickerShow"
      :columns="columns"
      :keyName="keyName"
      @confirm="showConfirm"
      @close="pickerClose"
      @cancel="pickerCancel"
      :closeOnClickOverlay="true"
    ></u-picker>
  </view>
</template>

<script>
import { deviceFanDetail, devicefanSave } from "@/api/deviceManage.js";
import { findEnableDictItemsbyCode } from "@/api/api.js";
import {
  Toast,
  navBack,
  handleClickRouter,
  isNumber,
  emitTime,
} from "@/utils/util.js";
import mixin from "@/utils/mixin.js";

export default {
  mixins: [mixin],
  data() {
    return {
      baseImgUrl: this.$baseImgUrl,
      baseURL: this.$baseURL,
      options: {},
      form: {},
      errorType: ["none"],
      orFlag: 1, // 1：添加   2：编辑  3：详情
    };
  },
  onLoad(options) {
    this.options = JSON.parse(decodeURIComponent(options.data));
    if (this.options.fanInfoStatus) {
      this.orFlag = 3;
      uni.setNavigationBarTitle({
        title: "详情",
      });

      deviceFanDetail({ deviceId: this.options.id }).then((res) => {
        if (res.code == 200) {
          let { fanType } = res.result;
          findEnableDictItemsbyCode("fan_device_type").then((res2) => {
            res2.result.forEach((v) => {
              if (v.value == fanType) {
                this.form = { ...res.result, fanTypeDesc: v.title };
              }
            });
          });
        }
      });
    }
  },
  onShow() {
    if (uni.getStorageSync("addwmInfo")) {
      this.form = uni.getStorageSync("addwmInfo");
    }
  },
  methods: {
    handleClickRouter,
    navBack,
    /* cell 点击 */
    cellClick(name, type) {
      this.keyName = name;
      this.cellType = type;
      let code = "";
      switch (this.cellType) {
        case "fanTypeDesc":
          code = "fanTypeDesc";
          break;

        default:
          break;
      }

      if (code == "fanTypeDesc") {
        findEnableDictItemsbyCode("fan_device_type").then((res) => {
          this.columns[0] = res.result || [];
          this.pickerShow = true;
        });
      }
    },
    /* 选择器 确定 */
    showConfirm(e) {
      let arr = e.value;
      if (arr.length) {
        let obj = arr[0];
        switch (this.cellType) {
          case "fanTypeDesc":
            this.form.fanType = obj.value;
            this.form.fanTypeDesc = obj.text;
            break;
          default:
            break;
        }
      }
      this.pickerShow = false;
    },
    editHandle() {
      this.orFlag = 2;
      uni.setNavigationBarTitle({
        title: "编辑",
      });
    },
    submitHandle() {
      let { fanTypeDesc, fanSpend, fanRealSpend } = this.form;

      if (!fanTypeDesc) {
        Toast("请选择风机类型");
        return;
      }

      if (!fanSpend) {
        Toast("请输入排风速");
        return;
      }

      if (!isNumber(fanSpend)) {
        Toast("排风速请输入数字");
        return;
      }

      if (!fanRealSpend) {
        Toast("请输入实际排风量");
        return;
      }

      if (!isNumber(fanRealSpend)) {
        Toast("实际排风量请输入数字");
        return;
      }

      if (!this.options.id) {
        uni.setStorageSync("addwmInfo", this.form);
        Toast("保存成功");
        navBack();
        return false;
      }

      // 列表点击进来 -- 添加
      if (this.options.fanInfoStatus == 0 && this.options.id) {
        this.form.deviceId = this.options.id;
      }

      devicefanSave(this.form).then((res) => {
        if (res.code == 200) {
          Toast("保存成功");
          // uni.$emit("deviceInfoData", this.options.id);
          emitTime("deviceInfoData", this.options.id);
          navBack();
          return;
        }
        Toast(res.message);
      });
    },
  },
};
</script>

<style>
page {
  background-color: #f3f3f3 !important;
  height: 100%;
}
</style>
<style lang="scss" scoped>
.addwmInfo {
  flex: 1;
  background-color: #f3f3f3;
  .addwmInfo-title {
    position: absolute;
    top: 10rpx;
    left: 6%;
    color: #ffffff;
    font-size: 34rpx;
    font-weight: bold;
  }

  .wrapper {
    position: absolute;
    top: 30rpx;
    left: 50%;
    transform: translateX(-50%);
    // margin-bottom: 50px;

    .wrapper-item {
      margin-bottom: 2vh;
      padding: 35rpx 40rpx;
      background-color: #ffffff;
      border-radius: 10rpx;
      width: 702rpx;
    }

    .content {
      margin: 0 auto;
      height: calc(100vh - 90px);
      overflow-y: auto;
    }

    .seleTime {
      width: 45rpx;
      height: 45rpx;
    }
  }

  .map-form {
    display: flex;
    .map-img {
      color: #00c9ae;
      font-size: 30rpx;
      font-weight: 500;
      image {
        display: inline-block;
        margin-right: 10rpx;
        vertical-align: top;
        width: 30rpx;
        height: 40rpx;
      }
    }
  }

  .thispageBtn {
    position: absolute;
    width: 100vw;
    bottom: 0;
  }
}
</style>
